<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<title>Demo 4: Drag and drop</title>
	<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
	<style type="text/css">
	/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
	#mainContainer{
		width:600px;
		margin:0 auto;
		margin-top:10px;
		border:1px solid #000;
		padding:2px;
	}
	
	#numbers{
		width:200px;
		float:left;
		border:1px solid #000;
		background-color:#E2EBED;
		padding:3px;
		height:470px;
		
	}
	#sumOfNumbers{
		width:200px;
		float:right;
		margin:2px;
		height:470px;
		border:1px solid #000;
		background-color:#E2EBED;
		padding:2px;
		
	}	
	#collectionOfNumbers{
		width:200px;
		height:330px;
			
		margin-bottom:5px;
		padding:10px;
	}
	#sumNumbers{
		width:200px;
		height:50px;
		border:1px solid #000;	
		padding:10px;	
		font-size:2em;
		font-weight:bold;
		
		
	}
	.dragableBox{
		width:80px;
		height:18px;
		border:1px solid #000;
		background-color:#FFF;		
		margin-bottom:5px;
		padding:6px;
		font-weight:bold;
		text-align:center;
	}

	.dropBox{
		width:190px;
		border:1px solid #000;
		background-color:#E2EBED;
		height:400px;
		margin-bottom:10px;
		padding:3px;
		overflow:auto;
	}		
	a{
		color:#F00;
	}
		
	.clear{
		clear:both;
	}
	</style>	
	<script type="text/javascript" src="../js/dhtml-suite-for-applications.js"></script>
</head>
<body>	
	<div id="header">
		<img src="../images/logo.png">
	</div>
	<div id="mainContainer">
		<h2>Drag and drop - demo 4</h2>
		<div id="numbers">
			<p><b>Numbers</b></p>
			<div id="dropContent">
				<div class="dragableBox" id="box1">1</div>
				<div class="dragableBox" id="box2">2</div>
				<div class="dragableBox" id="box3">3</div>
				<div class="dragableBox" id="box4">4</div>
				<div class="dragableBox" id="box5">5</div>
				<div class="dragableBox" id="box6">6</div>
				<div class="dragableBox" id="box7">7</div>
			</div>
		</div>
		<div id="sumOfNumbers">
			<p><b>The sum is</b></p>
			<div id="collectionOfNumbers"></div>	
			<div id="sumNumbers">= 0</div>	
		
		</div>
		<div class="clear"></div>
	</div>

<div id="debug"></div>
<script type="text/javascript">

// Custom drop action for the country boxes

function dropItems(idOfDraggedItem,targetId,x,y)
{
	var targetObj = document.getElementById(targetId);	// Creating reference to target obj
	var sourceObj = document.getElementById(idOfDraggedItem);	// Creating reference to source, i.e. dragged object


	
	
	if(targetId=='collectionOfNumbers'){	// Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
		targetObj.appendChild(sourceObj);	// Append	
	}else{
		document.getElementById('dropContent').appendChild(sourceObj);
	}

	divs = document.getElementById('collectionOfNumbers').getElementsByTagName('DIV');
	var sum = 0;
	for(var no=0;no<divs.length;no++){
		sum = sum + divs[no].innerHTML/1;
	}
	document.getElementById('sumNumbers').innerHTML = '= ' + sum;
		
}



var dragDropObj = new DHTMLSuite.dragDrop();	// Creating drag and drop object

// Assigning drag events to the capitals
dragDropObj.addSource('box1',true);	// Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true);	// Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true);	// Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true);	// Make <div id="box4"> dragable. slide item back into original position after drop


// Assigning drop events on the countries
dragDropObj.addTarget('collectionOfNumbers','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('numbers','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop

dragDropObj.init();	// Initizlizing drag and drop object
</script>



</body>
</html>